<template>
	<view class="shop_card" :style="style">
		<view :class="type == 'big' ? 'pic_big' : 'pic_small'">
			<slot name="pic">
				<image src="/static/index/shop_img_delete.png" mode="aspectFill"></image>
			</slot>
			<view class="none" v-if="sellout">
				已售罄
			</view>
			<!-- 			<view class="miaosha">
				<image src="/static/index/miaosha.png" mode="aspectFill"></image>
			</view> -->
		</view>
		<view class="shop_info">
			<view :class="type == 'big' ? 'shop_title_big' : 'shop_title_small'">
				<slot name="title">
					康师傅冰红茶 一桶非常牛逼的冰红茶 逼的冰红茶 逼的冰红茶
				</slot>
			</view>
			<view class="shop_sub_title">
				<slot name="subtitle1">
					<!-- 美味可口 | 冰力十足 -->
				</slot>
			</view>
			<view class="shop_sub_title">
				<slot name="subtitle2">
					配送规格：15
				</slot>
			</view>
			<view class="shop_limit">
				<slot name="limit">
					<!-- 每日限10件 -->
				</slot>
			</view>
			<view class="shop_price">
				<slot name="price">
					<PriceFont color="#FF4F30" bigSize="40rpx" smallSize="28rpx" price="29.8" />
				</slot>
			</view>
			<!-- 			<view class="shop_add">
				<slot name="add">
					<view class="btn" v-if="true">
						加入购物车
					</view>
					<view class="add_number" v-else>
						<van-stepper :value="1" integer />
					</view>
				</slot>
			</view> -->
			<view @click.stop="addCar" class="btn" :style="{ backgroundColor: sellout || permissionStatus != '1' ? '#808080' : '#FF1642' }">
				<van-icon name="shopping-cart-o" size="36rpx" />
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { reqAddGoodsToCart } from '@/apis/rexiaogoods'
	export default {
		name: "ShopCard",
		props: {
			type: {
				type: String,
				default () {
					return "big";
				}
			},
			sellout: {
				type: Boolean,
				default () {
					return false;
				}
			},
			style: {
				type: String,
				default () {
					return "";
				}
			},
			ecCommodityId: {
				type: String,
				default () {
					return "";
				}
			},
			ecCommodityType: {
				type: String,
				default () {
					return "";
				}
			},
			animationStatus:{
				type:Boolean,
				default(){
					return false;
				}
			}
		},
		computed: {
			...mapGetters('user', ['permissionStatus'])
		},
		data() {
			return {

			};
		},
		onLoad() {

		},
		methods: {
			async addCar(e) {
				if (this.sellout || this.permissionStatus != '1' || this.animationStatus) return;
				try {
					const res = await reqAddGoodsToCart({
						ecCommodityId: this.ecCommodityId,
						type: this.ecCommodityType
					})
					if (res.code === 200) {
						this.$emit('clickAddBtn',e);
						this.$store.dispatch('car/addToCar', res.data)
						console.log('total', this.$store.getters['car/allCount'], this.$store.getters['car/allMoney']);
					}
				} catch (e) {
					setTimeout(() => {
						this.$emit('refreshPage');
					}, 1500);
				}
				// console.log(res);
			},
		}
	}
</script>

<style lang="scss">
	.shop_card {
		border-radius: 12rpx;
		padding: 16rpx;
		background-color: #fff;
		display: flex;
		margin-bottom: 16rpx;

		.pic_big,
		.pic_small {
			width: 300rpx;
			height: 300rpx;
			margin-right: 16rpx;
			position: relative;
			border-radius: 10rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}

			.miaosha {
				width: 102rpx;
				height: 38rpx;
				top: 0;
				left: 0;
				position: absolute;
			}

			.none {
				top: 0;
				left: 0;
				position: absolute;
				width: 300rpx;
				height: 300rpx;
				background: rgba(0, 0, 0, 0.6);
				border-radius: 10rpx;
				line-height: 300rpx;
				color: #fff;
				text-align: center;
				font-weight: bold;
				font-size: 40rpx;
			}
		}

		.pic_small {
			width: 180rpx;
			height: 180rpx;
			margin-right: 16rpx;
			position: relative;

			.none {
				top: 0;
				left: 0;
				position: absolute;
				width: 180rpx;
				height: 180rpx;
				background: rgba(0, 0, 0, 0.6);
				border-radius: 10rpx;
				line-height: 180rpx;
				color: #fff;
				text-align: center;
				font-weight: bold;
				font-size: 30rpx;
			}
		}

		.shop_info {
			display: flex;
			flex-direction: column;
			flex: 1;
			justify-content: space-between;
			position: relative;

			.shop_title_big,
			.shop_title_small {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				line-height: 38rpx;
				letter-spacing: 1px;
				word-break: break-all;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.shop_title_small {
				font-weight: 600;
				font-size: 28rpx;
				line-height: 33rpx;
			}

			.shop_sub_title {
				font-weight: 400;
				font-size: 24rpx;
				color: #808080;
				line-height: 28rpx;
			}

			.shop_limit {
				font-weight: 500;
				font-size: 24rpx;
				color: #FF4F30;
				line-height: 28rpx;
			}

			.shop_price {
				.small {
					font-size: 24rpx;
					color: #808080;
				}
			}

			// .shop_add {
			// 	.btn {
			// 		width: 334rpx;
			// 		height: 48rpx;
			// 		background: linear-gradient(90deg, #FF4F30 0%, #FF1642 100%);
			// 		border-radius: 24rpx 24rpx 24rpx 24rpx;
			// 		font-weight: 500;
			// 		font-size: 28rpx;
			// 		color: #FFFFFF;
			// 		line-height: 48rpx;
			// 		letter-spacing: 1px;
			// 		text-align: center;
			// 	}

			// 	/deep/ .van-stepper__input {
			// 		width: 208rpx;
			// 		margin: 0 14rpx;
			// 		height: 44rpx;
			// 		background: #FFFFFF;
			// 		border-radius: 4rpx 4rpx 4rpx 4rpx;
			// 		border: 2rpx solid #CCCCCC;
			// 		line-height: 44rpx;
			// 		font-weight: 500;
			// 		font-size: 32rpx;
			// 		color: #333333;
			// 		letter-spacing: 1px;
			// 	}

			// 	/deep/ .van-stepper__minus,
			// 	/deep/ .van-stepper__plus {
			// 		width: 48rpx;
			// 		height: 48rpx;
			// 		background: linear-gradient(180deg, #FF4F30 0%, #FF1642 100%);
			// 		border-radius: 0rpx 0rpx 0rpx 0rpx;
			// 		border-radius: 50%;
			// 		color: #fff;
			// 		font-size: 28rpx;
			// 	}

			// 	/deep/ .van-stepper__minus--disabled {
			// 		background: #FFFFFF !important;
			// 		border: 2rpx solid #CCCCCC;
			// 		color: #CCCCCC;
			// 	}
			// }
			.btn {
				position: absolute;
				width: 48rpx;
				height: 48rpx;
				bottom: 0;
				right: 0;
				background-color: #FF1642;
				border-radius: 50%;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				// image {
				// 	width: 100%;
				// 	height: 100%;
				// }
			}
		}
	}
</style>